<template>
	<a-modal :maskClosable="false" title="关联服务商" :width="840" :visible="showModal"
		:confirm-loading="confirmLoading" :ok-type="'primary'" @ok="confirmOk" @cancel="cancel">
		<a-form :form="form">
			<section class="filter-bar mb-16">
			  <span class="label">服务商名称：</span>
			  <a-input class="mr-24 w-300" allow-clear placeholder="请输入服务商简称或全称" v-model="name" @pressEnter="search" maxLength="50"/>
			  <a-button type="primary" @click="search">查询</a-button>
			  <a-button class="ml-8" @click="reset">重置</a-button>
			</section>
			<a-table bordered rowKey="id"  :row-selection="rowSelection" class="mt-16" :columns="columns" :data-source="data" :scroll="scroll" :pagination="pagination">
				<template #name="val, data">
				{{data.name}}
				</template>
				<template #phone="val, data">
			        {{data.contactName}}
				<a-divider
					type="vertical" />
					 {{data.contactPhone}}
					 <a-divider
					 	type="vertical" />
						 {{data.contactEmail}}
				</template>
				
				
				
			</a-table>
		
			
			
		</a-form>
	</a-modal>
</template>

<script>
	import {
		getActivityRelationVendor,getActivityBindVendor,getVendorSearch
	} from '@/api/operationInfo/channel'
	import moment from 'moment'
	import { tableMixins } from '@/utils/mixins'
	export default {
		mixins: [tableMixins],
		props: {
			id: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
			    loading: false,
				showModal:false,
				name:'',
				selectedRowKeys: [],
				selectedRows:[],
				data:[],
				total:0,
				order:{},
				columns: [
					{
						title: '服务商',
						dataIndex: 'name',
						// width: 40,
						scopedSlots: {
							customRender: 'name'
						},
						 align: 'center'
					},
					{
						title: '联系方式',
						// width: 120,
						dataIndex: 'phone',
						scopedSlots: {
							customRender: 'phone'
						},
						 align: 'center'
					},
					
				],
				arguments:[],//参数
			}
		},
		computed: {
			
			scroll() {
				return {x: this.data.length === 0 ? undefined : 1500}
			},
			 rowSelection() {
			      const { selectedRowKeys,selectedRows } = this;
			      return {
			        selectedRowKeys,
			        onChange: this.onSelectChange,
			        hideDefaultSelections: true,
			        onSelection: this.onSelection,
			      }
				   },
		},
		methods: {
			getData() {
						  if(!this.name)this.name=undefined
			  this.loading = true
			  getVendorSearch(this.getParams()).then(data => {
			    this.total = data.rowCount
			    this.data = data.items
			  }).catch(err => {
			  }).finally(() => this.loading = false)
			},
			getParams() {
			  return {
						pageNo: this.pageNum,
						pageSize: this.rowsNum,
						search: this.name,
						activityId:this.order.id
			  }
			},
			confirmOk(){
				 this.arguments=[]
			     if(this.selectedRows.length==0){
					  this.$message.error("至少得选择一个服务商")
					 return 
					
				 }else if(this.selectedRows.length!==0){
					 let arrey=this.selectedRows
					  arrey.forEach(res=>{
						 this.arguments.push(res.id)
					  })
					  let data={
					  	activityId:this.order.id,
					  	vendorId:this.arguments
					  }
					  this.$confirm({
					    title: '提示',
					    content: `已选${this.selectedRows.length}个服务商，请确定是否关联？`,
					    okText: '确定',
					    okType: 'danger',
					    cancelText: '取消',
					    onOk: () => {
					      getActivityBindVendor(data).then(() => {
							   this.$emit('getData')
					        this.$message.success('关联成功！')
					       this.showModal = false
					      })
					    },
					  })
					 	
					
				 }
				 
				
			},
			search() {
			  this.pageNum = 1
			  this.getData()
			},
			onSelectChange(selectedRowKeys,selectedRows) {
			      console.log('selectedRowKeys changed: ', selectedRowKeys,selectedRows);
			      this.selectedRowKeys = selectedRowKeys;
				  this.selectedRows=selectedRows
			    },
			reset() {
				  this.selectedRowKeys=[]
			  this.name = ''
			  this.search()
			},
			cancel(){
				 this.selectedRowKeys=[]
				this.showModal = false
			},
			open(data){
				 this.selectedRowKeys=[]
				this.order=data
				this.showModal = true
				this.getData()
			},
		},
	}
</script>

<style lang="less" scoped>
	/deep/.ant-table-fixed {
	  width: 100%;
	  width: 500px!important; /* 设置最大宽度 */
	}
	.upload-list {
		/deep/ .ant-form-item-label {
			height: 30px;
			line-height: normal;
		}
	}
</style>